import { PureComponent } from "react";
import MToast from "../../Util/MToast"
import { isNull, handleInputFocusBlur } from "../../../utils/helper"
interface Props {
	value?: any,
	onChange?: Function,
	max?: any,
	min?: any,
	decimal?: any,
	step?: any,
	label?: string,
	required?: any,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: string,
	label_width?: any,
	hasError: boolean,
	errorMsg: string,
	label_text_color?: string,
	label_text_align?: any,
	suffix_label?: any,
}

interface State {
	value: any

}
export default class MyInputNumberClick extends PureComponent<Props, State> {
	public state: State = {
		value: this.props.value
	}
	componentWillReceiveProps(nextProps) {
		// Should be a controlled component.
		if ('value' in nextProps) {
			let value = nextProps.value;
			this.setState({
				value
			});
		}
	}
	changeValue = (value) => {
		if (!('value' in this.props)) {
			this.setState({
				value: value
			});
		}
		this.triggerChange(value);
	};

	triggerChange = (changedValue) => {
		const onChange = this.props.onChange;
		if (onChange) {
			onChange(changedValue);
		}
	};
	onChange = (val) => {
		let value = val;
		const reg1 = /^[0-9]{1,}.{0,1}([0-9]*)?$/;
		const reg = /^-(([0-9]{0,})|([0-9]{1,}.{0,1}))([0-9]*)?$/;//匹配 - 号开头的数
		if ((reg.test(value)) || (reg1.test(value)) || value === '') {
			if (value.toString().indexOf(".") == value.length - 1) {
			}
			else if (value.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(value))) {
					if (parseFloat(value) == 0) {

					}
					else {
						value = parseFloat(value)
					}
				}
			}
			else if (isNaN(value)) {
				value = parseFloat(value)
			}
			else {
				value = Number(value)
			}
			this.changeValue(value)
		}
	};
	onBlur = (val) => {
		handleInputFocusBlur(true);
		if (!isNull(val)) {
			if (val.toString().indexOf(".") == val.length - 1) {
				val = Number(val.substring(0, val.length - 1))
			}
			else if (val === "-") {
				val = undefined
			}
			else if (val.toString().indexOf("-") == 0) {
				if (!isNaN(parseFloat(val))) {
					if (parseFloat(val) == 0) {
						val = 0
					}
					else {
						val = parseFloat(val)
					}
				}
			}
			else {
				if (isNaN(Number(val))) {
					val = undefined
				}
				else {
					val = Number(val)
				}
			}
			let { max, min, decimal } = this.props;
			if (!isNull(max)) {
				if (val >= max) {
					val = max
				}
			}
			if (!isNull(min)) {
				if (val <= min) {
					val = min
				}
			}
			if (isNull(decimal)) {
				decimal = 1
			}
			val = Number(val).toFixed(decimal);
			this.changeValue(val)
		}
	};
	sub = () => {
		let { min, max, step, decimal } = this.props;
		if (isNull(step)) {
			step = 1
		}
		let { value } = this.state;
		if (isNull(value)) {
			value = 0
		}
		value = value * 1 - step * 1;
		if (!isNull(min)) {
			if (value < min) {
				value = min;
			}
		}
		if (isNull(decimal)) {
			decimal = 1
		}
		value = Number(value).toFixed(decimal);
		this.onChange(value);
	}
	add = () => {
		let { min, max, step, decimal } = this.props;
		if (isNull(step)) {
			step = 1
		}
		let { value } = this.state;
		if (isNull(value)) {
			value = 0
		}
		value = value * 1 + step * 1;
		if (!isNull(max)) {
			if (value > max) {
				value = max;
			}
		}
		if (isNull(decimal)) {
			decimal = 1
		}
		value = Number(value).toFixed(decimal);
		this.onChange(value);
	}
	render() {
		let { label, required, disabled, readonly, show_label, tips, label_width = 5, hasError, errorMsg, label_text_color, label_text_align = "left", suffix_label, decimal } = this.props;
		if (isNull(decimal)) {
			decimal = 1
		}
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1;
		let isRequired = required == 1;
		let { value } = this.state;
		let requiredClass = "am-list-item am-input-item am-list-item-middle mi-text mi-radio-group";
		if (isRequired) {
			requiredClass += " required"
		}
		if (hasError) {
			requiredClass += " am-input-error"
		}
		if (!isNull(label_text_align)) {
			requiredClass += " label-text-align-" + label_text_align
		}
		let labelClass = "am-input-label am-input-label-";
		if (isNull(label_width)) {
			labelClass += "3"
		}
		else {
			labelClass += label_width
		}
		let showValue = "";
		if (!isNull(value)) {
			// showValue = Number(value).toFixed(decimal);
			showValue = value;
		}
		return (
			<div>
				<div className={requiredClass} style={{ fontSize: "16px" }} data-flex="box:first">
					{
						isShowLabel ? <div className={labelClass} style={{ color: label_text_color }}>
							{label}
						</div> : <div></div>
					}
					<div style={{ color: "#888", paddingRight: "0" }} className="am-list-line" data-flex="dir:left box:last">
						<div data-flex="main:right cross:center">
							<div data-flex style={{ height: "30px", lineHeight: "26px", border: "1px solid #ddd", borderRadius: "5px" }}>
								<p style={{ fontSize: "24px", borderRight: "1px solid #ddd", width: "30px", textAlign: "center" }} onClick={() => {
									this.sub()
								}}>-</p>
								<input value={showValue} style={{ textAlign: "center", width: "80px", border: "none" }}
									onFocus={() => {
										handleInputFocusBlur();
									}}
									onChange={(e) => {
										this.onChange(e.target.value);
									}} onBlur={(e) => {
										this.onBlur(e.target.value);
									}} disabled={isDisabled} readOnly={isReadonly} />
								<p style={{ fontSize: "24px", borderLeft: "1px solid #ddd", width: "30px", textAlign: "center" }} onClick={() => {
									this.add();
								}}>+</p>
							</div>
							{
								suffix_label && <span style={{ marginLeft: "5px" }}>{suffix_label}</span>
							}

						</div>
						<div className="am-input-error-extra mi" onClick={(e) => {
							e.stopPropagation();
							MToast.info(errorMsg, 2, null, false)
						}} style={{ minWidth: "21px", width: "21px" }}
						/>
					</div>
				</div>
				{tips && <p className="tipsStyle">{tips}</p>}
			</div>
		)
	}
}
